<div class="toolbar margin-bottom btn-and-search" [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="item flex" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="14" nzLg="14" nzXl="18">
    <button class="margin-right" nz-button nzType="default" nzDanger (click)="batchRemoveLogInIds()">
      <i nz-icon nzType="delete" nzTheme="outline"></i><span *ngIf="!isMobile">删除</span>
    </button>
    <button class="margin-right" nz-button nzType="default" nzDanger (click)="clearLog()">
      <i nz-icon nzType="clear" nzTheme="outline"></i><span *ngIf="!isMobile">清空</span>
    </button>
  </div>

  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="10" nzLg="10" nzXl="6">
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="请输入账号" [(ngModel)]="keyword"/>
    </nz-input-group>
    <ng-template #suffixIconButton>
      <button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button>
    </ng-template>
  </div>

</div>

<nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed" [nzScroll]="{ x: 'auto' }"
          [(nzPageIndex)]="pageHelper.currentPage" (nzPageIndexChange)="nzPageHelperChange($event)"
          [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
          [nzFrontPagination]="false">
  <thead>
  <tr>
    <th [nzChecked]="baseService.zorro.checked"
        [nzIndeterminate]="baseService.zorro.indeterminate"
        (nzCheckedChange)="checkedAll($event)"></th>
    <th>编号</th>
    <th>账号</th>
    <th>登录IP</th>
    <th>登录地点</th>
    <th>浏览器</th>
    <th>操作系统</th>
    <th>登录状态</th>
    <th>操作日期</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let data of nzTable.data let i =index">
    <tr>
      <td
        [nzChecked]="baseService.zorro.setOfCheckedId.has(data.id)"
        [nzDisabled]="data.disabled"
        (nzCheckedChange)="checkedItem(data.id, $event)"
      ></td>
      <td>{{ i + 1 }}</td>
      <td nzEllipsis>{{ data.userName }}</td>
      <td nzEllipsis>{{ data.ip }}</td>
      <td nzEllipsis>{{ data.place }}</td>
      <td nzEllipsis>{{ data.browser }}</td>
      <td nzEllipsis>{{ data.system }}</td>
      <td nzEllipsis>
        <span *ngIf="data.status == 0">登录失败</span>
        <span *ngIf="data.status == 1">登录成功</span>
      </td>
      <td nzEllipsis>{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
      <td nzEllipsis>
        <a (click)="delete(data.id)">
          <i nz-icon nzType="delete" nzTheme="twotone" [nzTwotoneColor]="'#F5222D'" nz-tooltip
             nzTooltipTitle="删除" nzTooltipPlacement="bottom"></i>
        </a>
      </td>
    </tr>
    <tr nzEllipsis [nzExpand]="baseService.zorro.expandSet.has(data.id)">
      <span>{{ data.details }}</span>
    </tr>
  </ng-container>
  </tbody>
</nz-table>


<app-log-clear #logClear [isVisible]="isVisible" (event)="setVisible($event)"></app-log-clear>
